import { Form, Input, Modal, Select, message, Upload } from "antd";
import { useEffect } from "react";
import userService, { UserItem } from "@/api/services/userService";
import { PlusOutlined } from "@ant-design/icons";

interface UserModalProps {
	open: boolean;
	user: UserItem | null;
	onSuccess: () => void;
	onCancel: () => void;
}

const UserModal = ({ open, user, onSuccess, onCancel }: UserModalProps) => {
	const [form] = Form.useForm();
	const isEdit = !!user;

	useEffect(() => {
		if (open && user) {
			form.setFieldsValue({
				...user,
				business_license_img: user.business_license_img
					? [{ url: user.business_license_img }]
					: [],
				wechat_qr_code_img: user.wechat_qr_code_img
					? [{ url: user.wechat_qr_code_img }]
					: [],
				alipay_qr_code_img: user.alipay_qr_code_img
					? [{ url: user.alipay_qr_code_img }]
					: [],
				website_logo: user.website_logo ? [{ url: user.website_logo }] : [],
			});
		} else {
			form.resetFields();
		}
	}, [open, user, form]);

	const handleOk = async () => {
		try {
			const values = await form.validateFields();
			// 处理图片字段
			const formatValues = {
				...values,
				business_license_img: values.business_license_img?.[0]?.url || "",
				wechat_qr_code_img: values.wechat_qr_code_img?.[0]?.url || "",
				alipay_qr_code_img: values.alipay_qr_code_img?.[0]?.url || "",
				website_logo: values.website_logo?.[0]?.url || "",
			};

			if (isEdit) {
				await userService.userEdit({
					id: user.id,
					...formatValues,
				});
			} else {
				await userService.userAdd(formatValues);
			}
			onSuccess();
		} catch (error: any) {
			// 表单验证失败不显示错误提示
			if (error.errorFields) {
				return;
			}
			message.error(isEdit ? "编辑失败" : "添加失败");
		}
	};

	const uploadButton = (
		<div>
			<PlusOutlined />
			<div style={{ marginTop: 8 }}>上传</div>
		</div>
	);

	return (
		<Modal
			title={isEdit ? "编辑用户" : "新增用户"}
			open={open}
			onOk={handleOk}
			onCancel={onCancel}
			destroyOnClose
			width={800}
		>
			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
				<Form.Item
					name="mobile"
					label="手机号"
					rules={[
						{ required: true, message: "请输入手机号" },
						{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
					]}
				>
					<Input placeholder="请输入手机号" />
				</Form.Item>
				{!isEdit && (
					<Form.Item
						name="password"
						label="密码"
						rules={[
							{ required: true, message: "请输入密码" },
							{ min: 6, message: "密码长度不能小于6个字符" },
						]}
					>
						<Input.Password placeholder="请输入密码" />
					</Form.Item>
				)}

				<Form.Item
					name="nickname"
					label="昵称"
					rules={[{ required: true, message: "请输入昵称" }]}
				>
					<Input placeholder="请输入昵称" />
				</Form.Item>

				<Form.Item name="company" label="公司名称">
					<Input placeholder="请输入公司名称" />
				</Form.Item>

				<Form.Item name="alipay_account" label="支付宝账号">
					<Input placeholder="请输入支付宝账号" />
				</Form.Item>

				<Form.Item name="wechat_account" label="微信账号">
					<Input placeholder="请输入微信账号" />
				</Form.Item>

				<Form.Item name="remark" label="备注">
					<Input.TextArea placeholder="请输入备注信息" />
				</Form.Item>

				<Form.Item
					name="status"
					label="状态"
					rules={[{ required: true, message: "请选择状态" }]}
					initialValue={1}
				>
					<Select
						placeholder="请选择状态"
						options={[
							{ label: "正常", value: 1 },
							{ label: "禁用", value: 0 },
						]}
					/>
				</Form.Item>

				<Form.Item
					name="business_license_img"
					label="营业执照"
					valuePropName="fileList"
					getValueFromEvent={(e) => {
						if (Array.isArray(e)) {
							return e;
						}
						return e?.fileList;
					}}
				>
					<Upload
						listType="picture-card"
						maxCount={1}
						beforeUpload={() => false}
					>
						{form.getFieldValue("business_license_img")?.length
							? null
							: uploadButton}
					</Upload>
				</Form.Item>

				<Form.Item
					name="website_logo"
					label="工作室门头照"
					valuePropName="fileList"
					getValueFromEvent={(e) => {
						if (Array.isArray(e)) {
							return e;
						}
						return e?.fileList;
					}}
				>
					<Upload
						listType="picture-card"
						maxCount={1}
						beforeUpload={() => false}
					>
						{form.getFieldValue("website_logo")?.length ? null : uploadButton}
					</Upload>
				</Form.Item>

				<Form.Item
					name="wechat_qr_code_img"
					label="微信二维码"
					valuePropName="fileList"
					getValueFromEvent={(e) => {
						if (Array.isArray(e)) {
							return e;
						}
						return e?.fileList;
					}}
				>
					<Upload
						listType="picture-card"
						maxCount={1}
						beforeUpload={() => false}
					>
						{form.getFieldValue("wechat_qr_code_img")?.length
							? null
							: uploadButton}
					</Upload>
				</Form.Item>

				<Form.Item
					name="alipay_qr_code_img"
					label="支付宝二维码"
					valuePropName="fileList"
					getValueFromEvent={(e) => {
						if (Array.isArray(e)) {
							return e;
						}
						return e?.fileList;
					}}
				>
					<Upload
						listType="picture-card"
						maxCount={1}
						beforeUpload={() => false}
					>
						{form.getFieldValue("alipay_qr_code_img")?.length
							? null
							: uploadButton}
					</Upload>
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default UserModal;
